<template>
  <div class="message-area-container">
    <DataForm @submit="handelSubmit" />
    <h3>
      {{ title }}
      <span>{{ subTitle }}</span>
    </h3>
    <DataList :list="list" />
    <div class="loading" v-loading="isListLoading"></div>
  </div>
</template>

<script setup>
import DataForm from './DataForm.vue'
import DataList from './DataList.vue'
const $emit = defineEmits(['submit'])
defineProps({
  title: {
    type: String,
    default: ''
  },
  subTitle: {
    type: String,
    default: ''
  },
  list: {
    type: Array,
    default: () => []
  },
  isListLoading: {
    type: Boolean,
    default: false
  }
})
function handelSubmit(formdata, callback) {
  $emit('submit', formdata, callback)
}
</script>

<style scoped lang="scss">
.loading {
  position: relative;
  height: 100px;
}
</style>
